import { h, fragment } from '@knno/dom/jsx';
import { Form, FormCell } from '@knno/ui/jsx/form';
import { Input } from '@knno/ui/jsx/input';
import { Select } from '@knno/ui/jsx/select';
import { Group } from '@knno/ui/jsx/group';
import { Radio } from '@knno/ui/jsx/radio';
import { Card } from '@knno/ui/jsx/card';
import { Textarea } from '@knno/ui/jsx/textarea';

export function ShowForm() {
	return (
		<>
			<h2>表单</h2>
			<Card>
				<h1 style={{ margin: 'inherit' }}>表单</h1>
				<hr class="double" />
				<Form>
					<FormCell caption="标题" required colspan="2">
						<Input />
					</FormCell>
					<FormCell caption="标题标题" required help="这是一个帮助" notice="错误信息">
						<Input />
					</FormCell>
					<FormCell caption="标题" help="这是一个帮助">
						<Input />
					</FormCell>
					<FormCell caption="标题" help="这是一个帮助">
						<Group>
							<Radio text="选项1" />
							<Radio text="选项2" />
							<Radio text="选项3选项3选项3选项3选项3" />
						</Group>
					</FormCell>
					<FormCell caption="标题">
						<Select />
					</FormCell>
					<FormCell caption="多行输入" colspan="8">
						<Textarea />
					</FormCell>
					<hr />
				</Form>
			</Card>
		</>
	);
}
